<template>
  <div class="settings">
    <el-card class="box-card" v-if="!isMobile">
      <div style="margin-bottom: 20px">
      <el-select v-model="value" placeholder="请选择" @change="query">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
<!--      <el-button style="margin-left: 10px;" @click="query" type="primary">搜索</el-button>-->
      </div>
      <el-row>
        <!--<el-col :span="12">-->
        <!--<Searchmodule :placeholder="placeholder"  @seacherKey="getPageTransaction"></Searchmodule>-->
        <!--</el-col>-->
        <el-col :span=6>
          <el-date-picker value-format="yyyy-MM-dd"
                          v-model="queryInfo.collectMonth" size="medium"
                          type="month"
                          placeholder="选择月份">
          </el-date-picker>
        </el-col>
<!--        <el-col :span="6">-->
<!--          <el-date-picker value-format="yyyy-MM-dd HH:mm:ss"-->
<!--                          v-model="queryInfo.receiveTimeEnd" size="medium"-->
<!--                          type="datetime"-->
<!--                          placeholder="选择日期">-->
<!--          </el-date-picker>-->
<!--        </el-col>-->
        <el-col :span="2">
          <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
        </el-col>
        <el-col :span="2">
          <el-button   type="primary"   @click="exportCountsMonths">导出</el-button>
        </el-col>
        <!--<el-col :span="2"  >-->
          <!--<el-button  type="primary" icon="el-icon-download" @click="downloadTemplate">下载导入模板</el-button>-->
        <!--</el-col>-->
        <!--<el-col :span="2"  >-->
          <!--<el-button    type="primary" icon="el-icon-download" @click="addImoprt">新增导入</el-button>-->
        <!--</el-col>-->
      </el-row>
      <el-table :row-style="{height: '10px'}" :cell-style="{padding:'5px'}" :data="tableData" border v-loading="loading">
        <el-table-column prop="months" label="月份" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="counts" label="月入库/出库次数" align="center"  :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="materialNumber" label="入库/出库种类(物料编号)" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
        <el-table-column prop="money" label="出库/入库金额" align="center"   :show-overflow-tooltip="true">
        </el-table-column>
      </el-table>
        <el-pagination style="text-align: center;" :disabled="loading" @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNo" :page-sizes="[25,50]" :page-size="queryInfo.pageSize" layout="total, sizes, prev, pager, next, jumper"
        :total="total">
      </el-pagination>
    </el-card>
          <!-- 手机 -->
    <div class="mobile-box" v-else>
         <el-row class="mobile-seacher-box">
    <el-select v-model="value" placeholder="请选择" @change="query">
        <el-option
          v-for="item in options"
          :key="item.value"
          :label="item.label"
          :value="item.value">
        </el-option>
      </el-select>
   </el-row>
    <el-row class="mobile-seacher-box" style="flex-direction: inherit">
        <el-col :span="10" style="margin-right: 85px">
          <el-date-picker value-format="yyyy-MM-dd"
                          v-model="queryInfo.collectMonth" size="medium"
                          type="month"
                          placeholder="选择月份">
          </el-date-picker>
        </el-col>
        <el-col :span="4">
          <el-button   type="primary" icon="el-icon-search" @click="seacher">搜索</el-button>
        </el-col>
    </el-row>
      <div >
        <ul v-if="tableData.length" v-loading="loading">
          <li class="list-item" v-for="item in tableData" :key="item.id">
            <el-card>
              <el-col :span="24">
                <div>月份：{{ item.months }}</div>
              </el-col>
              <el-col :span="24">
                <div>月入库/出库次数：{{ item.counts }}</div>
              </el-col>
              <el-col :span="24">
                <div>入库/出库种类(物料编号)：{{ item.materialNumber }}</div>
              </el-col>
              <el-col >
                <div>出库/入库金额：{{item.money}}</div>
              </el-col>
            </el-card>
          </li>
          <el-pagination
            v-if="total >= queryInfo.pageSize"
            style="text-align: center; width: 90%; overflow: auto"
            :disabled="loading"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="queryInfo.pageNo"
            :page-sizes="[25, 50]"
            :page-size="queryInfo.pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="total"
          >
          </el-pagination>
        </ul>
        <div v-if="!tableData.length" class="no-data">
          <img :src="require('../../../assets/noData.jpg')" />
        </div>
      </div>
    </div>

<!--    <el-dialog :visible.sync="importVisible" append-to-body width="30%">-->
<!--      <p style="text-align: center;" class="map">新增导入</p>-->
<!--      <el-form :model="importForm">-->
<!--        <el-form-item label="导入的文件" prop="fileName">-->
<!--          <el-upload   style="margin: 0 10px;" :action="importUrl+'import/uploadExcel'"-->
<!--                       :on-success="uploadSuccessHandler"-->
<!--                       :on-error="uploadFailHandler"-->
<!--                       :before-upload="beforeUpload"-->
<!--                       :file-list="fileList"-->
<!--                       multiple-->
<!--                       name="excel" :show-file-list="true" :headers="headers">-->
<!--            <el-button  type="primary" icon="el-icon-download">点击上传</el-button>-->
<!--            <div slot="tip" class="el-upload__tip">上传EXCEL文件</div>-->
<!--          </el-upload>-->

<!--        </el-form-item>-->

<!--        <el-form-item label="工程类型:" prop="fileName">-->
<!--          <el-select  style="margin-right: 20px;"  clearable v-model="importForm.engType" placeholder="请选择">-->
<!--            <el-option-->
<!--              v-for="item in engTypes"-->
<!--              :key="item.code"-->
<!--              :label="item.name"-->
<!--              :value="item.code">-->
<!--            </el-option>-->
<!--          </el-select>-->

<!--        </el-form-item>-->
<!--      </el-form>-->

<!--      <span slot="footer" class="dialog-footer">-->
<!--        <el-button class="global-button" round type="primary" @click="importVisible = false">关闭</el-button>-->
<!--        <el-button class="global-button" round type="primary" @click="submitImport">提交</el-button>-->
<!--      </span>-->
<!--    </el-dialog>-->
  </div>
</template>

<script>
import { quertList, exportCountsMonth } from '@/api/reportFrom'
export default {
  data: () => ({
    tableData: [],
    loading: false,
    isMobile: false,
    value: '1',
    options: [
      { label: '入库', value: '1' },
      { label: '出库', value: '2' }
    ],
    total: 0,
    queryInfo: {
      pageNo: 1,
      pageSize: 25,
      collectMonth: ''
    },
    importVisible: false,
    importForm: {
      importType: 5,
      fileName: ''
    }
  }),
  created () {
    if (this.$utils.isMobile()) {
      this.isMobile = true
    }
    this.getList()
  },
  methods: {
    downloadFile (res, name) {
      const blob = new Blob([res.data])
      const fileName = name + '.xlsx'
      const elink = document.createElement('a')
      elink.download = fileName
      elink.style.display = 'none'
      elink.href = URL.createObjectURL(blob)
      document.body.appendChild(elink)
      elink.click()
      URL.revokeObjectURL(elink.href)
      document.body.removeChild(elink)
    },
    exportCountsMonths () {
      exportCountsMonth(this.value, this.queryInfo).then(res => {
        this.downloadFile(res, '月度物资统计表')
      })
    },
    addImoprt () {
      this.importVisible = true
    },
    getList () {
      this.loading = true
      quertList(this.value, this.queryInfo).then(res => {
        this.loading = false
        console.log(res)
        this.tableData = res.data.data.records
        this.total = res.data.data.total
      })
    },
    query () {
      this.getList()
    },
    handleCurrentChange (val) {
      this.queryInfo.pageNo = val
      this.getList()
    },
    handleSizeChange (size) {
      this.queryInfo.pageSize = size
      this.getList()
    },
    seacher (key) {
      this.getList()
    }
  }
}
</script>

<style scoped lang="scss">
@mixin box-width {
    width: 90%;
    margin: 10px auto;
  }
  .mobile-box {
    position: relative;
    .el-row{
      display: flex;
      flex-direction: column;
    }
    .btn-data , .mobile-seacher-box{
      @include box-width;
    }
    .mobile-seacher-box{
      width: 90%;
      margin: 5px auto;
    }
    ul {
      padding: 0;
      & > li {
        @include box-width;
        list-style-type: none;
        .btn-box {
          text-align: right;
          margin-bottom: 10px;
        }
        .el-col {
          margin: 5px 0;
        }
      }
    }
    .no-data {
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      img {
        width: 400px;
      }
    }
    .addForm {
      .el-input,
      .el-select,
      .el-textarea{
        width: 100%;
      }
      .el-form-item{
        padding: 0 20px;
        margin-bottom: 10px;
        .btn-box{
          width: 100%;
          text-align: center;
          margin: 20px 0;
          .el-button{
            width: 45%;
          }
        }
      }
    }
    .detail-box{
      overflow: auto;
      div{
        margin: 5px 0;
        font-size: 15px;
      }
    }
  }
</style>
